<script lang='ts' setup>
import { reactive, Ref, ref } from "vue"
import { useStore } from "/@/store"
import { useRouter } from "vue-router"
// import { ElMessage, ElNotification } from "element-plus"
import BasicFooter from "/@/layouts/basic-layout/footer/index.vue"
import vueImgVerify from "./component/verification-code .vue" // 引入验证码的子组件
import { messageSuccessTip } from "/@/utils/message-config"
import { getSysConfig } from "/@/api/sys/index"
const store = useStore()
const router = useRouter()
const jxForm = ref()
const btnLoading = ref(false)
const inputDisabled = ref(false)
const isKeepPassword = ref(true)
const redirectUrl: Ref<string> = ref(
  router.currentRoute.value.query.redirect as string
)

const verifyRef = ref()

// 验证码自定义验证
const validateVerify = (rule: any, value: any, callback: any) => {
  if (
    verifyRef.value &&
    verifyRef.value.imgCode == loginFormState.loginForm.verify.toUpperCase()
  ) {
    callback()
  } else {
    // 图形验证码	// console.log(verifyRef.value.imgCode)
    callback(new Error("验证码错误!"))
    verifyRef.value.handleDraw()
  }
}
const loginFormState = reactive({
  loginForm: {
    account: "admin",
    password: "12345",
    verify: ""
    // account: '',
    // password: ''
  },

  rules: {
    account: [
      {
        required: true,
        message: "请填写用户名",
        trigger: "blur"
      },
      {
        min: 1,
        max: 20,
        message: "名称长度超过20字符",
        trigger: "blur"
      }
    ],
    password: [
      {
        required: true,
        message: "请填写密码",
        trigger: "blur"
      }
    ],
    verify: [
      {
        required: true,
        message: "请填写验证码",
        trigger: "blur"
      },
      { validator: validateVerify, trigger: "blur" }
    ]
  }
})

const onSubmit = () => {
  btnLoading.value = true
  inputDisabled.value = true
  jxForm.value.validate((valid: any) => {
    if (valid) {
      store
        .dispatch("user/login", loginFormState.loginForm)
        .then(res => {
          messageSuccessTip("登陆成功!" + "欢迎您，" + res.data.username)
          //先判断是否为home路由
          if (!redirectUrl.value || redirectUrl.value == "/home")
            redirectUrl.value = localStorage.getItem("preRoute") as string
          if (!redirectUrl.value) redirectUrl.value = "/home"
          router.push({ path: redirectUrl.value })
        })
        .catch(err => {
          console.log(err)
          jxForm.value.resetFields()
        })
        .finally(() => {
          btnLoading.value = false
          inputDisabled.value = false
        })
    } else {
      btnLoading.value = false
      inputDisabled.value = false
      return false
    }
  })
}
//获取后台配置信息
getSysConfig().then(res => store.dispatch("sysconfig/setSysConfig", res.data))
</script>
<template>
  <div class="login-container">
    <div class="login-box">
      <div class="turn">
        <!-- 正面 -->
        <div class="obverse">
          <div class="login-box-left">
            <div class="loginLeft1">
              <img src="../../../assets/img/loginLeft1.svg" />
            </div>
            <div>
              <div class="logo">
                <img src="../../../assets/img/28logo.png" style="height: 100%;" />
              </div>
              <div class="login-title">
                <h3>数据资产管理平台</h3>
              </div>
            </div>
          </div>
          <div class="login-box-right">
            <div class="user-login-title">
              <h3>用户登录</h3>
              <span>USER LOGIN</span>
            </div>
            <div>
              <el-form ref="jxForm" :model="loginFormState.loginForm" :rules="loginFormState.rules">
                <el-form-item prop="account">
                  <el-input :disabled="inputDisabled" v-model="loginFormState.loginForm.account" placeholder="请输入用户名称">
                    <template #prefix>
                      <jxtech-svg-icon :icon="'#icon-user-filling'" :size="28"></jxtech-svg-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input :disabled="inputDisabled" v-model="loginFormState.loginForm.password" show-password placeholder="请输入登录密码">
                    <template #prefix>
                      <jxtech-svg-icon :icon="'#icon-yuechi2'" :size="26"></jxtech-svg-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="verify">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-input placeholder="输入验证码" v-model="loginFormState.loginForm.verify" maxlength="4">
                        <template #prefix>
                          <jxtech-svg-icon icon="#icon-anquan1" :size="26"></jxtech-svg-icon>
                        </template>
                      </el-input>
                    </el-col>
                    <el-col :span="12">
                      <vue-img-verify ref="verifyRef" />
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>

              <div class="pwd-status">
                <!-- <span>
									<el-checkbox v-model="isKeepPassword" label="记住密码"></el-checkbox>
								</span>-->
                <span class="forget-password pointer">忘记密码?</span>
              </div>

              <el-button class="btn-login pointer" @click="onSubmit" id="btn-login" :loading="btnLoading">
                <span>登 录</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <basic-footer></basic-footer>
  </div>
</template>
<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background-color: rgba(236, 245, 255, 1);
  .login-box {
    box-shadow: 0px 1px 12px 4px rgba(212, 212, 212, 0.6);
    width: 800px;
    height: 530px;
    position: absolute;
    top: 15%;
    // margin-top: 130px;
    left: 50%;
    margin-left: -400px;
    z-index: 2;
    .turn {
      transform-style: preserve-3d;
      position: relative;
      width: 100%;
      height: 100%;
      .obverse {
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden;

        .login-box-left {
          float: left;
          width: 330px;
          height: 530px;
          background: url(/@/assets/img/loginLeft2.svg) 0 0 / cover;
          // 	no-repeat;
          // background-color: rgb(22, 51, 214);
          .loginLeft1 {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
          }
          .logo {
            height: 88px;
            width: 100%;
            margin-top: 30px;
            display: flex;
            justify-content: center;
            vertical-align: center;
          }
          .login-title {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: #fff;
            h3 {
              font-weight: 700;
            }
          }
        }
        .login-box-right {
          float: left;
          width: 470px;
          height: 530px;
          background-color: rgb(255, 255, 255);
          padding: 36px 46px;

          .user-login-title {
            margin-bottom: 100px;
            display: flex;
            font-weight: 700;
            align-items: baseline;
            > h3 {
              color: #666;
              font-size: 18px;
              margin-right: 10px;
            }
            > span {
              font-size: 14px;
              color: #999;
              font-weight: 400;
              vertical-align: bottom;
            }
          }
          .pwd-status {
            text-align: right;
            // display: flex;
            // justify-content: space-between;
            // align-items: center;
            padding-bottom: 10px;
            .forget-password {
              color: red;
              font-size: 14px;
            }
          }
          .btn-login {
            width: 100%;
            height: 50px;
            text-align: center;
            background-color: rgb(64, 158, 255, 1);
            border-radius: 4px;
            font-size: 900;
            color: #fff;
            span {
              font-weight: 700;
              font-style: normal;
              font-size: 18px;
            }
          }
        }
      }
    }
  }
}

::v-deep(.el-input) {
  height: 50px;

  .el-input__inner {
    height: 50px;
    padding-left: 40px;
  }
  .el-input__prefix {
    top: 24%;
  }
}
</style>